<template>
    <view class="product-detail">
        <!-- <view class="detail-header">
            <p class="title">关于我们</p>
        </view> -->
        <u-parse :content="content"></u-parse>
    </view>
</template>

<script>
import { getArticleDetails } from '../../../utils/api/user'
export default {

    data() {
        return {
            formattedDetailImg: this.formatImg(this.detailImg),
            content:'',
        };
    },
    mounted() {
        this.getabout();
    },
    methods: {
        getabout() {
            getArticleDetails({ id: 10101014 }).then(res => {
            console.log("🚀 ~ getArticleDetails ~ res:", res)
            this.content  = res.data.content;
            })
        },
        formatImg(content) {
            if (!content) return '';
            const regex = /<img[^>]*>/g;
            content = content.replace(regex, function (match) {
                return match.replace('>', ' style="max-width:100%;height:auto;">');
            });
            return content;
        }
    },
    watch: {
        detailImg(newVal) {
            this.formattedDetailImg = this.formatImg(newVal);
        }
    }
};
</script>

<style lang="less" scoped>
.product-detail {
    padding: 20px;
    background-color: #f9f9f9;
    border-radius: 8px;

    .detail-header {
        margin-bottom: 15px;
        border-bottom: 1px solid #ddd;
        padding-bottom: 5px;

        .title {
            font-size: 18px;
            font-weight: bold;
            color: #333;
        }
    }

    .detail-content {
        ::v-deep img {
            border-radius: 4px;
            margin-bottom: 10px;
        }

        p,
        ul,
        ol {
            font-size: 16px;
            color: #555;
            line-height: 1.6;
            margin-bottom: 10px;
        }

        ul,
        ol {
            padding-left: 20px;
        }

        li {
            margin-bottom: 5px;
        }
    }
}
</style>
